<template>
  <view id="orderListPart">
    <mescroll-body
      class="ss"
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view class="list">
        <view
          class="listItem"
          v-for="(item, i) in dataList"
          :key="i"
          @click="goDetail(item)"
        >
          <view class="time">
            <!-- <view class="type" :class="{ active: item.bz == 2 }">{{
              item.bz == 1 ? "家政" : "医疗"
            }}</view> -->
            <view class="shijian" v-if="status==1">
              下单时间
              <text>{{ item.create_time }}</text>
            </view>
            <view class="shijian" v-if="status==2">
              付款时间
              <text>{{ item.pay_time }}</text>
            </view>
            <view class="shijian" v-if="status==3">
              服务完成
              <text>{{ item.finish_time }}</text>
            </view>
            <view class="shijian" v-if="status==4">
              评价完成
              <text>{{ item.pingjia_time }}</text>
            </view>
           
          </view>
          <view v-for="(item2, i2) in item.service_list" :key="i2">
           
            <view class="content" >
              <!-- {{active==2?item2:item2.serve_name}} -->
              {{ item2.service_name }}
            </view>
            <view class="lineBox" >
             <view class="line" v-if="status==1">
                <view class="left"> 应付金额: </view>
                <view class="right">
                  ￥{{ item.total_price }}
                </view>
              </view>
              <view class="line" v-if="status==2 || status==3">
                <view class="left"> 所选规格: </view>
                <view class="right">
                  {{ item2.specs_name }}
                </view>
              </view>
              <view class="line" v-if="status==2">
                <view class="left"> 上门时间: </view>
                <view class="right">
                  {{ item2.visit_time }}
                </view>
              </view>
              <view class="line" v-if="status!=4">
                <view class="left"> 服务人员: </view>
               
                <view class="right" style="color: #0077ff" v-if="item2.serve_person.length>0">
                  <text
                    v-for="(item3, i3) in item2.serve_person"
                    :key="i3"
                    style="margin-right: 10rpx"
                  >
                    {{ item3 }}</text
                  >
                </view>
                <view  v-else style="color: #0077ff">未指定</view>
              </view>
            </view>
            <!-- <view class="lineBox" v-if="status == 2">
              <view class="line">
                <view class="left"> 申请内容: </view>
                <view class="right chang">
                  {{ item.content }}
                </view>
              </view>
              <view class="line">
                <view class="left"> 申请原因: </view>
                <view class="right">
                  {{ item.appro_name }}
                </view>
              </view>
            </view> -->
          </view>

          <view class="caozuo">
            <text  v-if="status == 1" @click.stop="orderClose(item)">取消订单</text>
            <text @click.stop="closeOrder" v-if="status!=1">退款并关闭</text>
            <view v-if="status == 2 ||status == 1" @click.stop="modifyOrder(item)">指派修改</view>
            
          </view>
          <div class="hr"></div>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

export default {
  mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
  props: {
    status: {
      type: Number,
      default: 1,
    },
    nowType:{
        type: Number,
        default: 1,
    }
  },
  data() {
    return {
      downOption: {
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        page: {
          size: 100, // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          tip: "暂无相关数据",
        },
        auto: false,
      },
      dataList: [],
      orderList: [],
    };
  },
  watch:{
      nowType(nv,ov){
          this.loadData(1);
      }
  },
  mounted() {
    this.mOrderList(this.status);
    this.mescroll.lockDownScroll(true)
  },
  methods: {
    modifyOrder(item){//前往修改订单
        console.log(item)
        uni.navigateTo({
					url:`/pages/order/modifyorder?oid=${item.oid}`
				})
    },
    orderClose(item){
        uni.showModal({
          title: '提示',
          content: '确定取消订单?',
          success: (res)=> {
              if (res.confirm) {
                this.$store.dispatch("orderClose",{oid:item.oid})
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
          }
      });
      
    },
    goDetail(item){//前往订单详情
			
				uni.navigateTo({
					url:`/pages/order/orderDetail?oid=${item.oid}`
				})
	},
    mOrderList(status) {
      //订单状态，1待付款 2待服务 3待评价 4已完成
      this.$store.dispatch("mOrderList", { status: status }).then((res) => {
        //console.log(Object.values(res.data), "ssssssssssssssssssssssssss");
        this.orderList = Object.values(res.data);
        this.loadData(1);
      });
    },
    upCallback(page) {
      //联网加载数据
      this.loadData(page.num);
    },
    downCallback(page) {
      this.mOrderList(this.status);
    },
    loadData(pageNo) {
      // pageNo页码, 默认从1开始
      // 模拟接口
      let pageSize = 100; // 页长, 默认每页10条
      let curPageData = this.orderList.filter((item)=>{
          return item.bz==this.nowType
      }).
      slice(
        (pageNo - 1) * pageSize,
        pageNo * pageSize
      ); // 模拟返回的当前页数据列表 (数组)
      //console.log(curPageData ,this.orderList,Math.ceil(this.orderList.length / pageSize))
      // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
      let curPageLen = curPageData.length;
      // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
      let totalPage = Math.ceil(this.orderList.length / pageSize);
      // 接口返回的是否有下一页 (true/false)
      let hasNext = totalPage == pageNo ? false : true;
      // console.log(hasNext,'是否有下一页')
      if (pageNo == 1) {
        this.dataList = curPageData;
      } else {
        this.dataList = [...this.dataList, ...curPageData];
      }
      console.log(curPageLen, this.dataList, totalPage, "数据列表");
      this.mescroll.endByPage(curPageLen, totalPage); //必传参数(当前页的数据个数, 总页数)
    },
  },
};
</script>

<style lang="scss" scoped>
#orderListPart {
  padding: 20rpx;
  box-sizing: border-box;
  .list {
    
    margin-bottom: 20upx;

    .listItem {
      width: calc(100% - 60upx);
      background: white;
      padding: 30upx;
      position: relative;
      margin-bottom: 10upx;

      .time {
        display: flex;
        justify-content: space-between;
        font-size: 28upx;
        margin-bottom: 22upx;

        .type {
          color: #f7b500;
          &.active {
            color: #50b83c;
          }
        }

        .shijian {
          font-size: 28upx;
          color: #a4a8b7;

          text {
            margin-left: 40upx;
          }
        }
      }

      .content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 22upx;
        font-size: 36upx;
      }

      .lineBox {
        width: 100%;

        .line {
          display: flex;
          margin-bottom: 16upx;
          font-size: 30upx;
          line-height: 44upx;

          .left {
            color: #a4a8b7;
            margin-right: 20upx;
            width: 140upx;
            font-size: 28upx;
          }

          .right {
            font-size: 32upx;
            width: calc(100% - 140upx);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .caozuo {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        color: #f04559;
        font-size: 28upx;
        line-height: 60upx;

        view {
          width: 180upx;
          text-align: center;
          line-height: 60upx;
          border-radius: 30upx;
          background: #0077ff;
          color: white;
          margin-left: 36upx;
        }
      }

      .hr {
        position: absolute;
        width: 93%;
        height: 4upx;
        bottom: 0upx;
        right: 0;
        background: #eee;
        margin-top: 50px;
      }
    }
  }
}
</style>